<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var message = "Hello World"
    if (true) console.log(message)

    function foo() {
      console.log("在foo中访问", message)
    }
    foo()

    // ES5之前是没有块级作用域(var定义的变量是没有块级作用域)
    {
      var count = 100
      console.log("在代码块中访问count:", count)
    }
    console.log("在代码块外访问count:", count)

    for (var i = 0; i < 3; i++) {
      var foo = "foo"
    }
    console.log("for循环外访问foo:", foo)
    console.log("for循环外访问i:", i)


    // ES5之前函数代码块是会形成自己的作用域
    // 在函数内部定义的变量,外部是访问不到的
    function test() {
      var bar = "bar"
    }
    test()
    // console.log("在函数外访问bar:", bar)

    function sayHello() {
      var nickname = "kobe"
      console.log("sayHello内部访问nickname:", nickname)
      function hi() {
        console.log("在hi函数内访问nickname", nickname)
      }
      hi()
    }
    sayHello()
    console.log("sayHello外部访问nickname:", nickname)


  </script>
</body>

</html>